<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		是一套用于 构建用户界面 的 渐进式 js框架
		渐进式：自底向上逐层的应用
		
		vue的特点：（组件化；无需操作DOM；使用虚拟DOM和diff算法复用DOM节点）
			1.采用组件化模式，提高代码复用率，切让代码更好维护。
			2.声明式编码，无需操作DOM，提高开发效率。
			3.使用 虚拟DOM+Diff算法，尽量复用DOM节点。
					

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'

						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->

		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ 
					//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					//因为vue实例不会被复用，所以data可以写成对象形式。组件一般是用来复用的，所以要写成函数形式
					name:'hpu',
					address:'北京'
				}
			})

		</script>
	</body>
</html>